<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钉钉卡片发送器</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/style.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h1 class="mb-4">钉钉卡片发送器</h1>

        <!-- 样式选择区域 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5>选择卡片样式</h5>
            </div>
            <div class="card-body">
                <div class="row" id="templateSelector">
                    <div class="col-md-3 mb-3">
                        <div class="card-template card h-100" data-template="text">
                            <div class="card-body">
                                <h6 class="card-title">纯文本卡片</h6>
                                <p class="card-text">简单的文本内容卡片</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="card-template card h-100" data-template="image_text">
                            <div class="card-body">
                                <h6 class="card-title">图文卡片</h6>
                                <p class="card-text">带图片的图文混排卡片</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="card-template card h-100" data-template="action_card">
                            <div class="card-body">
                                <h6 class="card-title">操作卡片</h6>
                                <p class="card-text">包含按钮操作的卡片</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="card-template card h-100" data-template="markdown">
                            <div class="card-body">
                                <h6 class="card-title">Markdown卡片</h6>
                                <p class="card-text">支持Markdown格式的卡片</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="card-template card h-100" data-template="feed_card">
                            <div class="card-body">
                                <h6 class="card-title">信息卡片</h6>
                                <p class="card-text">多条信息流展示</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="card-template card h-100" data-template="single_action_card">
                            <div class="card-body">
                                <h6 class="card-title">单按钮卡片</h6>
                                <p class="card-text">只有一个操作按钮的卡片</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="card-template card h-100" data-template="oa_message">
                            <div class="card-body">
                                <h6 class="card-title">OA消息</h6>
                                <p class="card-text">适合审批、公告等场景</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 已保存模板加载区域 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5>加载已保存的模板</h5>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-4">
                        <input type="text" id="searchInput" class="form-control" placeholder="搜索模板...">
                    </div>
                    <div class="col-md-3">
                        <select id="categoryFilter" class="form-control">
                            <option value="">所有分类</option>
                            <!-- Categories will be loaded via JavaScript -->
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select id="tagFilter" class="form-control">
                            <option value="">所有标签</option>
                            <!-- Tags will be loaded via JavaScript -->
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button id="searchBtn" class="btn btn-outline-secondary w-100">搜索</button>
                        <button id="clearSearchBtn" class="btn btn-outline-secondary w-100 mt-1">清空</button>
                    </div>
                </div>
                <div class="row" id="savedTemplates">
                    <!-- Templates will be loaded here via JavaScript -->
                </div>
            </div>
        </div>

        <!-- 版本控制区域 -->
        <div class="card mb-4" id="versionControlPanel" style="display: none;">
            <div class="card-header">
                <h5>模板版本管理 - <span id="currentTemplateName"></span></h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-8">
                        <h6>历史版本</h6>
                        <div id="versionList" class="border p-2" style="max-height: 200px; overflow-y: auto;">
                            <!-- Versions will be listed here -->
                        </div>
                    </div>
                    <div class="col-md-4">
                        <h6>操作</h6>
                        <button id="showVersionsBtn" class="btn btn-info w-100 mb-2">查看版本</button>
                        <button id="hideVersionsBtn" class="btn btn-secondary w-100 mb-2">隐藏版本</button>
                        <button id="restoreVersionBtn" class="btn btn-warning w-100">恢复选中版本</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 内容编辑区域 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5>编辑卡片内容 (JSON格式)</h5>
            </div>
            <div class="card-body">
                <textarea id="cardJson" class="form-control" rows="15" placeholder='请在此输入钉钉卡片的JSON格式内容'>{
  "msgtype": "text",
  "text": {
    "content": "这是默认的钉钉卡片内容"
  }
}</textarea>
            </div>
        </div>

        <!-- 预览区域 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5>卡片预览</h5>
            </div>
            <div class="card-body">
                <div id="previewArea" class="border p-3 bg-light">
                    卡片预览将在此处显示
                </div>
            </div>
        </div>

        <!-- 保存和发送区域 -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <input type="text" id="templateName" class="form-control mb-2" placeholder="输入模板名称">
                        <select id="templateCategory" class="form-control mb-2">
                            <option value="">选择分类</option>
                            <!-- Categories will be loaded via JavaScript -->
                        </select>
                        <input type="text" id="templateTags" class="form-control mb-2" placeholder="输入标签（用逗号分隔）">
                        <button id="saveTemplateBtn" class="btn btn-primary">保存为模板</button>
                    </div>
                    <div class="col-md-3">
                        <h6>导入/导出</h6>
                        <input type="file" id="importFile" class="form-control mb-2" accept=".json">
                        <button id="importBtn" class="btn btn-info w-100 mb-1">导入模板</button>
                        <button id="exportBtn" class="btn btn-info w-100">导出当前</button>
                    </div>
                    <div class="col-md-3">
                        <button id="previewBtn" class="btn btn-secondary w-100 mb-2">预览卡片</button>
                        <button id="clearEditorBtn" class="btn btn-warning w-100">清空编辑器</button>
                    </div>
                    <div class="col-md-3">
                        <button id="sendBtn" class="btn btn-success w-100 mb-2">发送卡片</button>
                        <button id="batchSendBtn" class="btn btn-success w-100" data-bs-toggle="modal" data-bs-target="#batchSendModal">批量发送</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 发送历史记录 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5>发送历史记录</h5>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <input type="text" id="historySearch" class="form-control" placeholder="搜索历史记录...">
                    </div>
                    <div class="col-md-3">
                        <select id="historyTypeFilter" class="form-control">
                            <option value="">所有类型</option>
                            <option value="text">文本消息</option>
                            <option value="markdown">Markdown</option>
                            <option value="link">链接</option>
                            <option value="actionCard">操作卡片</option>
                            <option value="feedCard">信息卡片</option>
                            <option value="oa">OA消息</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <button id="refreshHistoryBtn" class="btn btn-info w-100">刷新记录</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div id="historyList" class="border rounded p-2" style="max-height: 300px; overflow-y: auto;">
                            <!-- History records will be loaded here -->
                            <p class="text-muted">正在加载历史记录...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 批量发送模态框 -->
        <div class="modal fade" id="batchSendModal" tabindex="-1" aria-labelledby="batchSendModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="batchSendModalLabel">批量发送卡片</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <!-- 批量发送选项卡 -->
                        <ul class="nav nav-tabs" id="batchTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="batch-send-tab" data-bs-toggle="tab" data-bs-target="#batch-send" type="button" role="tab">批量发送</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="scheduled-send-tab" data-bs-toggle="tab" data-bs-target="#scheduled-send" type="button" role="tab">定时发送</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="scheduled-tasks-tab" data-bs-toggle="tab" data-bs-target="#scheduled-tasks" type="button" role="tab">定时任务管理</button>
                            </li>
                        </ul>
                        <div class="tab-content" id="batchTabContent">
                            <div class="tab-pane fade show active" id="batch-send" role="tabpanel">
                                <div class="mb-3">
                                    <label for="batchCardsJson" class="form-label">批量发送配置 (JSON格式)</label>
                                    <textarea id="batchCardsJson" class="form-control" rows="10" placeholder='[
  {
    "webhook_url": "https://oapi.dingtalk.com/robot/send?access_token=...",
    "secret": "SEC...",
    "content": {
      "msgtype": "text",
      "text": {
        "content": "这是第一条消息"
      }
    }
  },
  {
    "webhook_url": "https://oapi.dingtalk.com/robot/send?access_token=...",
    "content": {
      "msgtype": "markdown",
      "markdown": {
        "title": "Markdown消息",
        "text": "# 这是第二条消息"
      }
    }
  }
]'></textarea>
                                </div>
                                <div class="mb-3">
                                    <button id="addSampleBatchBtn" class="btn btn-outline-secondary">添加示例配置</button>
                                    <button id="validateBatchBtn" class="btn btn-outline-primary">验证配置</button>
                                </div>
                                <div id="batchValidationResult" class="alert" style="display: none;"></div>
                                <div id="batchSendResults" class="mt-3"></div>
                            </div>
                            
                            <div class="tab-pane fade" id="scheduled-send" role="tabpanel">
                                <div class="mb-3">
                                    <label for="scheduleTime" class="form-label">定时发送时间</label>
                                    <input type="datetime-local" id="scheduleTime" class="form-control">
                                </div>
                                <div class="mb-3">
                                    <label for="scheduleWebhookUrl" class="form-label">Webhook URL (可选，留空使用默认)</label>
                                    <input type="text" id="scheduleWebhookUrl" class="form-control" placeholder="https://oapi.dingtalk.com/robot/send?access_token=...">
                                </div>
                                <div class="mb-3">
                                    <label for="scheduleSecret" class="form-label">密钥 (可选)</label>
                                    <input type="text" id="scheduleSecret" class="form-control" placeholder="SEC...">
                                </div>
                                <div class="mb-3">
                                    <button id="scheduleCurrentCardBtn" class="btn btn-primary">定时发送当前卡片</button>
                                    <button id="scheduleLoadCurrentCardBtn" class="btn btn-outline-secondary">加载当前卡片内容</button>
                                </div>
                                <div id="scheduleResult" class="alert" style="display: none;"></div>
                            </div>
                            
                            <div class="tab-pane fade" id="scheduled-tasks" role="tabpanel">
                                <div class="mb-3">
                                    <button id="refreshScheduledTasksBtn" class="btn btn-info">刷新任务列表</button>
                                </div>
                                <div id="scheduledTasksList">
                                    <!-- Scheduled tasks will be loaded here -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-success" id="executeBatchSendBtn">执行批量发送</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for confirmation -->
    <div class="modal fade" id="confirmModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">确认操作</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p id="confirmMessage">确认执行此操作？</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">确认</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/script.js"></script>
</body>
</html>